<template>
	<view class="pb130">
		<view v-for="(v,i) in arr" :key='i' class="">
			<view class="p3 f-y-c jlhd">
				<view class="f-1">{{v.name}}</view>
				<view class="f-1">ID:{{v.id}}</view>
				<view class="f-1">排序:{{v.sort}}</view>
				<view class="f-g-0 f-x-e">
					<view @click="bj(v.id)" class="bs10 p-8-20 cf" :style="{background:fColor}">编辑</view>
					<view @click="sc(v.id)" class="bs10 p-8-20 cf ml20" :style="{background:fColor}">删除</view>
				</view>
				<view class="zbhx" :style="{background:fColor}"></view>
			</view>
			<view class="bf f26">
				<view class="f-y-c p253">
					<view class="f-1">价格:{{v.price}}</view>
					<view class="">
						<switch @change="flkg(v,$event)" :checked="v.display==1" :color="fColor"></switch>
					</view>
				</view>
				<!-- <view class="f-row hlb">
					<view class="f-1 p253 f-c hlr">外卖</view>
					<view class="f-1 p253 f-c">堂食</view>
				</view>
				<view class="f-row p30">
					<view class="f-1 f-c-c hlr">
						<view>售价<text class="cf7c f22">(元)</text></view>
						<view class="mt10">{{v.outPrice}}</view>
					</view>
					<view class="f-1 f-c-c hlr">
						<view>库存<text class="cf7c f22">(件)</text></view>
						<view class="mt10">{{v.outStock}}</view>
					</view>
					<view class="f-1 f-c-c hlr">
						<view>售价<text class="cf7c f22">(元)</text></view>
						<view class="mt10">{{v.inPrice}}</view>
					</view>
					<view class="f-1 f-c-c">
						<view>库存<text class="cf7c f22">(件)</text></view>
						<view class="mt10">{{v.inStock}}</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="foot-btnc mt30">
			<button @click="xzjl" :loading="loading" :disabled="loading" class="foot-btn2" :style="{background:fColor}"
				hover-class="btnhc">新增加料</button>
		</view>
		<mg-as v-model="show" :list='list' @con='asdj'></mg-as>
		<mg-modal :vs='true' :ismr="true" v-model="showtc" width="650rpx" :z-index="3000">
			<view class="bs10 bf p-r">
				<text @click="showtc=false" class="ggx p-a iconfont iconcuo f50 c9"></text>
				<view class="p20 ggh f-c f32">
					<view class="t-o-e t-c" style="width: 80%;">{{isxz?'新增':'保存'}}加料</view>
				</view>
				<view class="ggb">
					<mg-input cname="p23" t='number' v-model="params.sort" isr='1' ht='排序' htc='f30' pr='请输入'
						icn='f30' />
					<mg-input cname="p23" v-model="params.name" isr='1' ht='加料名称' htc='f30' pr='请输入' icn='f30' />
					<mg-input cname="p23" t='digit' v-model="params.price" isr='1' ht='加料价格' htc='f30' pr='请输入'
						icn='f30' />
					<!-- <mg-input cname="p23" t='digit' v-model="params.outPrice" isr='1' ht='外卖价格' htc='f30' pr='请输入'
						icn='f30' />
					<mg-input cname="p23" t='number' v-model="params.outStock" isr='1' ht='外卖库存' htc='f30'
						pr='请输入'' icn=' f30' />
					<mg-input cname="p23" t='digit' v-model="params.inPrice" isr='1' ht='堂食价格' htc='f30' pr='请输入'
						icn='f30' />
					<mg-input cname="p23" t='number' v-model="params.inStock" isr='1' ht='堂食库存' htc='f30' pr='请输入'
						icn='f30' /> -->
				</view>
				<button class="foot-btn3 w33" :style="{background:fColor}" @click="save" :disabled="loading"
					:loading="loading" style="margin: 30rpx auto;" hover-class="btnhc">确定</button>
			</view>
		</mg-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import mgAs from '@/components/form/mg-as.vue'
	import mgModal from '@/components/common/modal.vue'
	import mgInput from '@/components/form/mg-input.vue'
	import mgPhoto from '@/components/form/mg-photo.vue'
	import utils from '@/common/utils.js'
	export default {
		name: 'jlsz',
		components: {
			mgAs,
			mgModal,
			mgInput,
			mgPhoto,
		},
		data() {
			return {
				arr: [],
				show: false,
				list: [{
					n: '编辑',
					t: 'bj',
				}, {
					n: '新增属性值',
					t: 'xz',
					hide: false,
				}, {
					n: '删除',
					t: 'sc',
					c: '#F77C00'
				}],
				showtc: false,
				params: {
					id: '',
					sort: '',
					name: '',
					price: '',
					// inPrice: '',
					// outStock: '',
					// inStock: '',
				},
				isxz: false,
				loading: false,
			}
		},
		onLoad(options) {
			// this.getSystem()
			this.util.setNT('加料设置')
			this.refreshList()
		},
		computed: {},
		methods: {
			sz(t) {
				this.show = true
			},
			asdj(v) {
				this.show = false
				console.log(v)
			},
			async sc(i) {
				try {
					await this.util.modal('确认删除吗')
					let res = await this.util.request({
						'url': this.api.spjlsc,
						method: 'POST',
						mask: 1,
						data: {
							id: i
						},
					})
					if (res) {
						this.util.message('操作成功', 1)
						this.refreshList();
					}
				} catch (e) {}
			},
			async bj(i) {
				this.isxz = false
				let {
					data
				} = await this.util.request({
					'url': this.api.spjllb,
					mask: 1,
					data: {
						id: i
					},
				}).catch()
				for (let k in this.params) this.params[k] = data[k]
				this.showtc = true
			},
			async refreshList() {
				try {
					let {
						data
					} = await this.util.request({
						'url': this.api.spjllb,
					})
					this.arr = data
				} catch (e) {}
			},
			xzjl() {
				this.isxz = true
				this.params.id = ''
				this.showtc = true
			},
			async save() {
				let judgeData = utils.isFailParams({
					field: this.params,
					filter: this.isxz ? ['id'] : [],
					tips: {
						id: '缺少id',
						sort: '请输入排序',
						name: '请输入名称',
						price: '请输入价格',
						// outStock: '请输入外卖库存',
						// inPrice: '请输入店内价格',
						// inStock: '请输入店内库存',
					}
				})
				if (!judgeData) {
					return
				} else {
					this.loading = true
					let res = await this.util.request({
						'url': this.api.spjltj,
						method: 'POST',
						mask: 1,
						data: this.params,
					}).catch()
					if (!res) {
						this.loading = false
					} else {
						this.util.message('保存成功', 1, 1000)
						this.showtc = false
						this.refreshList();
						this.loading = false
					}
				}
			},
			async flkg(v, e) {
				let data = await this.util.request({
					'url': this.api.spjlkg,
					method: 'POST',
					mask: 1,
					data: {
						id: v.id,
						display: e.detail.value ? 1 : 2
					}
				}).catch()
				if (data) {
					this.util.message('操作成功', 1)
					this.refreshList()
				}
				// console.log(v, e.detail.value)
			},
		},
	}
</script>
<style scoped lang="scss">
	.ggx {
		top: 20rpx;
		right: 20rpx;
	}

	.ggb {
		overflow-y: scroll;
	}

	.bq {
		padding: 8rpx 24rpx;
	}

	.ggi {
		height: 60rpx;
		border-radius: 56rpx;
		padding: 0 20rpx 0 30rpx;
	}

	.jggz {
		border: 1px solid #F77C00;
		padding: 0 30rpx;
	}

	.jlhd {
		position: relative;

		.zbhx {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			transform: scaleY(0.5);
			width: 8rpx;
		}
	}

	switch {
		transform: scale(0.82)
	}
</style>
